<!-- 实验管理 -->
<template>
<div class='thisPage experiment'>
  <!-- 顶部导航 -->
    <div class="pageTitle" style="">实验管理</div>
    <div class="topBanner"></div>
    <div class="heightP1"></div>
  <main>
    <!-- 左侧导航 -->
<!--     <aside>
      <div class="navBox" :class="key" v-for="(item, key, index) in leftNavData" :key="index">
        <p class="navTitleBox">
          <span class="navIcon"></span>
          <span class="navTitle">{{item.name}}</span>
        </p>
        <div 
          class="navItem" 
          v-for="(navItem, index) in item.items" 
          :key="index" 
          @click="toLeftPath(key, navItem)">
            {{navItem}}
        </div>
      </div>
    </aside> -->
    <div class="evluationPage-left" style="width:13%">
      <div v-for='it in pageLeft' :key='it.title' :class="it.class" :style="{height:it.height || '12.5%'}">
        <div class="leftItem">
          <div class="title">
            <img class="titleImg" :src="titleSrc" /><span class="titleText">{{ it.title}}</span>
          </div>
          <div class="content">
            <div class="contentItem" v-for='i in it.list' :key='i' @click="toLeftPath(key, navItem)">{{i}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧主体 -->
    <section>
      <ul class="section section1">
        <li v-for="(item, key, index) in stateData" :key="index">
          <img :src="item.img" :alt="item.title">
          <div class="stateRight">
            <p class="stateTitle">{{item.title}}</p>
            <p class="stateNum" :class="key">{{item.num}}</p>
          </div>
        </li>
      </ul>
      <ul class="section section2">
        <li v-for="(item, key, index) in APT" :key="index">
          <img :src="item.img" :alt="item.title" class="APTLeftImg">
          <div class="APTRight">
            <p>{{index === 1 ? '已完成 ' : '已发现 '}}<span class="num">{{item.num}}</span> 项</p>
            <p class="APTTitle">{{item.title}}</p>
            <p class="percentBox" :class="key">
              <img :src="item.state === 'up' ?  upUrl : downUrl" alt="">
              <span :class="item.state === 'up' ? 'upNum' : 'downNum'">{{item.percent}}%</span> 同比上周
            </p>
          </div>
        </li>
      </ul>
      <div class="section3">
        <el-row>
          <el-col span="1" style="height: 1px"></el-col>
          <el-col span="5">
            <div class="newAddLeft">
              <p class="navTitleBox">
                <span class="navIcon"></span>
                <span class="navTitle">实验新增</span>
              </p>
              <div class="addItem totalAdd">
                累计新增实验数 <span class="num">{{newAddData.total.num}}</span>
                <p class="percentBox" :class="key">
                  <img :src="newAddData.total.state === 'up' ?  upUrl : downUrl" alt="">
                  <span :class="newAddData.total.state === 'up' ? 'upNum' : 'downNum'">{{newAddData.total.percent}}%</span> 同比上周
                </p>
              </div>
              <div class="addItem weekAdd">
                本周新增实验数 <span class="num">{{newAddData.week.num}}</span>
                <p class="percentBox" :class="key">
                  <img :src="newAddData.week.state === 'up' ?  upUrl : downUrl" alt="">
                  <span :class="newAddData.week.state === 'up' ? 'upNum' : 'downNum'">{{newAddData.week.percent}}%</span> 同比上周
                </p>
              </div>
            </div>
          </el-col>
          <el-col span="18">
            <div class="newAddChartBox">
              <!-- <div id="newAddChart" :style="{width: '1300px', height: '220px', marginTop: '-8px'}"></div> -->
              <Chart :id="'newAddChart'" :style="{width: '100%', height: '220px', marginTop: '-8px'}" :option="lineOption"/>

              <datePicker @getTimeIndex="getTimeIndex"/>
            </div>
          </el-col>
        </el-row>
        
        
      </div>
      <div class="section section4">
        <div class="chartBox resourceBox">
          <p class="navTitleBox">
            <span class="navIcon"></span>
            <span class="navTitle">资源使用情况</span>
          </p>
          <!-- <div id="resourceChart" :style="{width: '520px', height: '220px', left: '-20px', top: '-35px'}"></div> -->
          <Chart v-if="ratio == 32/9" :id="'resourceChart'" :style="{width: '1000px', height: '220px', left: '-20px', top: '-35px'}" :option="pieOption"/>
          <Chart v-else-if="ratio == 16/9" :id="'resourceChart'" :style="{width: '500px', height: '220px', left: '-20px', top: '-35px'}" :option="pieOption"/>
        </div>
        
        <div class="chartBox expTypeBox">
          <p class="navTitleBox">
            <span class="navIcon"></span>
            <span class="navTitle">实验类型统计</span>
          </p>
          <!-- <div id="expTypeChart" :style="{width: '520px', height: '220px', marginTop: '-30px', marginLeft: '-20px'}"></div> -->
          <Chart v-if="ratio == 32/9" :id="'expTypeChart'" :style="{width: '1000px', height: '220px', marginTop: '-30px', marginLeft: '-20px'}" :option="barOption"/>
          <Chart v-if="ratio == 16/9" :id="'expTypeChart'" :style="{width: '490px', height: '220px', marginTop: '-30px', marginLeft: '-20px'}" :option="barOption"/>
        </div>
        <div class="chartBox expRankBox">
          <p class="navTitleBox">
            <span class="navIcon"></span>
            <span class="navTitle">实验排行Top5</span>
          </p>
          <el-table
            size="mini"
            :data="tableData"
            >
            <el-table-column label="排名" type="index" :align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="姓名" :align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="expNum" label="实验数" :align="center" :min-width="200" show-overflow-tooltip class="expNum">
              <template slot-scope="scope">
                {{scope.row.expNum}}
                <el-progress :show-text="false" :percentage="scope.row.expNum" class="progress"></el-progress>
              </template>
            </el-table-column>
            <el-table-column prop="weekOnWeek" label="周环比" :align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span :class="scope.row.state === 'up' ? 'upNum' : 'downNum'">{{scope.row.weekOnWeek}}%</span>
                <img :src="scope.row.state === 'up' ? upTranUrl : downTranUrl" alt="" style="vertical-align: middle;
"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
  </main>
</div>
</template>

<script>
import datePicker from "./component/datePicker";
import chartApi from "./utils/chartApi";
import Chart from "./component/Chart";

export default {
  components: {datePicker, Chart},
  data() {
    return {
      ratio: window.screen.width / window.screen.height,
      // 新增时间选择默认为1，按周
      upUrl: require('../../../images/experimentManage/up.png'),
      downUrl: require('../../../images/experimentManage/down.png'),
      upTranUrl: require('../../../images/experimentManage/up-triangle.png'),
      downTranUrl: require('../../../images/experimentManage/down-triangle.png'),
      titleSrc: "/static/B1/homePage/evaluation/arrow-left.png",
      isChecked: 0,
      topNavData: {
        data: { name: '数据汇聚', path: '' }, // path待修改
        threat: { name: '威胁监测', path: '' },
        origin: { name: '态势感知', path: '' },
        perception: { name: '溯源取证', path: '' },
      },
            pageLeft: [
        {
          title: "互联网数据",
          list: [
            "开源数据",
            "社交网络信息",
            "流量数据",
            "日志数据",
            "文件数据"
          ],
          class: "left-top",
          height: "26%"
        },
        {
          title: "涉密网数据",
          list: ["日志数据", "业务数据"],
          class: "left-middle",
          height: "15%"
        },
        {
          title: "移动网数据",
          list: ["日志数据"],
          class: "left-middle"
        },
        {
          title: "车联网数据",
          list: ["日志数据"],
          class: "left-middle"
        },
        {
          title: "电磁空间数据",
          list: ["日志数据"],
          class: "left-middle"
        },
        {
          title: "卫星网数据",
          list: ["日志数据"],
          class: "left-bottom"
        }
      ],
      stateData: {
        // num拿出来
        total: {
          img: require('../../../images/experimentManage/total.png'),
          title: '实验总数',
          num: 345
        },
        doing: {
          img: require('../../../images/experimentManage/doing.png'),
          title: '进行中',
          num: 265
        },
        tobeReviewed: {
          img: require('../../../images/experimentManage/tobeReviewed.png'),
          title: '待审核',
          num: 60
        },
        finished: {
          img: require('../../../images/experimentManage/finished.png'),
          title: '已完成',
          num: 56
        },
        reject: {
          img: require('../../../images/experimentManage/reject.png'),
          title: '驳回',
          num: 2
        }
      },
      APT: {
        // num percent state拿出来
        APTClue: {
          img: require('../../../images/experimentManage/APT1.png'),
          title: 'APT线索',
          num: 345,
          percent: 8.5,
          state: 'down'
        },
        APTOrigin: {
          img: require('../../../images/experimentManage/APT2.png'),
          title: 'APT溯源',
          num: 775,
          percent: 16,
          state: 'up'
        },
        threat: {
          img: require('../../../images/experimentManage/APT3.png'),
          title: '威胁',
          num: 474,
          percent: 32,
          state: 'up'
        }
      },
      newAddData: {
        total: { num: 2, percent: 10, state: 'up' },
        week: { num: 312, percent: 10, state: 'down' }
      },
      timeIndex: null,
      // xData与yData是根据接口返回
      xData: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      yData: [23,45,63,65,25,15,74],
      pieData: [
        {value: 10, name: '规则'},
        {value: 20, name: '日志'},
        {value: 30, name: '样本'},
        {value: 38, name: '统计'},
        {value: 12, name: '流量'}
      ],
      barData: [12,30,50,20,60],
      tableData: [{
        name: '小明',
        expNum: 50,
        weekOnWeek: 10,
        state: 'up'
      },{
        name: '小红',
        expNum: 42,
        weekOnWeek: 10,
        state: 'up'

      },{
        name: '高圆圆',
        expNum: 38,
        weekOnWeek: 10,
        state: 'down'

      },{
        name: '王强',
        expNum: 20,
        weekOnWeek: 10,
        state: 'down'

      },{
        name: '张三',
        expNum: 8,
        weekOnWeek: 10,
        state: 'up'
      }]
    };
  },
  computed: {
    lineOption() {
      return chartApi.getLineChart(this.xData, this.yData, this.$echarts)
    },
    pieOption() {
      return chartApi.getPieChart(this.pieData)
    },
    barOption() {
      return chartApi.getBarChart(this.barData)
    }
  },
  watch: {
    // 监听选择的是本日/本周/本月
    timeIndex(val) {
      if (val === 0) {
        this.xData = ['0:00', '1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00']
        this.yData = [12, 23, 34, 56, 7, 7, 8, 98, 9, 0, 9, 5, 5, 4, 3, 78, 90, 80, 78, 9, 78, 98, 123, 10, 12]
      }
      // 默认是1：周
      if (val === 1) {
        this.xData = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        this.yData = [23,45,63,65,25,15,74]
      }
      if (val === 2) {
        this.xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        this.yData = [1,2,3,4,5,6,7,8,9,10,12,34]
      }
    }
  },
  methods: {
    // 顶部跳转
    toTopPath(index) {
      this.isChecked = index
      console.log(index, '顶部导航跳转')
    },
    // 侧边栏跳转
    toLeftPath(type, navItem) {
      console.log(type, navItem, '左侧栏导航跳转')
    },
    // 从日周月切换子组件传过来的值，代表选择本日/本周/本月
    getTimeIndex (timeIndex) {
      this.timeIndex = timeIndex
    },
  },
  mounted() {},
  created() {},
}
</script>

<style lang="less" scoped>
@import url(./style.less);
@import url(../../../style/style.less);
.contentItem.content:last-child{
  margin-bottom:0!important;
}
.contentItem .right-item{
   margin-bottom:10px!important;
}
</style>
